<template>
    <div >
        <div v-for="item in tableReciver.dataSource" style="padding: 2%;">
            <span @contextmenu.prevent="showContextMenu" style="user-select: text;">{{ item['反馈内容'] }}</span>
        </div>
        <!-- <a-table
            class="table-box open-select"
            bordered
            :dataSource="tableReciver.dataSource"
            :columns="tableReciver.columns"
            :pagination="false"
        /> -->
        <a-menu
            v-if="visible"
            :style="{ position: 'absolute', top: `${menuY}px`, left: `${menuX}px` }"
            @click="changeColor(color)"
        >
            <a-menu-item v-for="color in colors" :key="color" :style="{ color: color }" @click="ColorCLick(color)">
                {{ color }}
            </a-menu-item>
        </a-menu>
    </div>
</template>
<script>
import { reactive, watch } from 'vue';
export default {
    name: 'TableSource',
    props: {
        tableOptions: {
            type: Object,
            default: () => {
                return {
                    columns: [],
                    dataSource: []
                };
            }
        }
    },
    data() {
        return {
            visible: false,
            menuX: 0,
            menuY: 0,
            colors: ['red', 'green', 'blue', 'black', 'orange'],
            colorData:'',
        };
    },
    mounted(){
        document.addEventListener('click', () => {
        this.visible = false;
        });
    },
    beforeDestroy() {
        document.removeEventListener('click', () => {
        this.visible = false;
        });
    },
    methods: {
    showContextMenu(event) {
      this.menuX = event.clientX;
      this.menuY = event.clientY;
      this.visible = true;
    },
    changeColor(color) {
        console.log(color)
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            const span = document.createElement('span');
            span.style.color = this.colorData;
            range.surroundContents(span);
        }
        this.visible = false;
    },
    ColorCLick(val){
        this.colorData = val
    }
  },
    setup(props) {
        let tableReciver = reactive({
            columns: [],
            dataSource: []
        });
        watch(
            () => props.tableOptions,
            (val) => {
                tableReciver.columns = val.columns;
                tableReciver.dataSource = val.dataSource;
            },
            {
                immediate: false,
                deep: true
            }
        );
        return {
            tableReciver
        };
    }
};
</script>
